// 变量
html{
    font-size: 16px;
}
@bg:#0c0c0c;
@color:#fc8e45;
@margin:6.25rem;
@font:#fff;
@bgcolor:#222222;
// 添加锚点平滑效果
 body,html{
     scroll-behavior: smooth;
 }

// 导航
.header{
    background-color: @bg;
    .logo{
        color: @font;
        // 将字母小写转为大写
        text-transform: uppercase;
        &:hover{
            color: @font;
        }
    }
    .navbar-default{
        background-color: @bg;
        border: none;
        border-radius: 0;
    }
    .navbar-default .navbar-nav>li>a{
        color: @font;
        text-transform: uppercase;
        &:hover{
            border-bottom: 3px solid @color;
        }
    }
    .navbar-default .navbar-nav>.active>a{
        background-color: transparent;
        color: @font;
        border-bottom: 3px solid @color;
    }
    .navbar{
        margin-bottom: 0;
    }
	.navbar-default .navbar-toggle{
		border: none;
	}
	.navbar-default .navbar-toggle:hover{
		background-color: transparent;
	}
}

@media (max-width:770px) {
		.header .navbar-default .navbar-nav > .active > a{
			border: none;
		}
		.header .navbar-default .navbar-nav>li>a{
			border: none !important;
			text-align: center;
			transition: all .6s; 
			&:hover{
				background-color: #ccc;
				font-size: 1.125rem;
			}
		}
	}

// 背景图
.banner{
    height: 43.5rem;
    // background: url(../img/ajydsvjkxaaajydsvjkxaa.gif);
    background-color: @bg;
	.banner-title{
		display: flex;
		justify-content: center;
		padding-top: 12.5rem;
		span{
			text-transform: uppercase;
			font-size: 2.0625rem;
			&:nth-child(1){
				color: @font;
			}
			&:nth-child(2){
				color: @color;
			}
		}
	}
	.banner-font{
		font-size: 1rem;
		color: @font;
		text-align: center;
		line-height: 2.1875rem;
	}
	.banner-btn{
		width: 3.125rem;
		height: 3.125rem;
		border:3px solid @font ;
		border-radius: 100%;
		margin: 283px auto;
		color: @font;
		text-align: center;
		font-size: 23px;
		line-height: 38px;
		transition: all .6s; 
		&:hover{
			box-shadow: 1px 1px 28px @font;
			transform: translateY(-15px);
		}
	}
    
}


// 内容
.main{
	height: 38.625rem;
	.main-left{
		padding-top: @margin;
	}
	.main-right{
		padding-top: @margin;
	}
	.main-title {
		font-size: 0.875rem;
		color: #636363;
		text-transform: uppercase;
	}
	.main-top{
		span{
			font-size: 1.5rem;
			text-transform: uppercase;
			&:nth-child(1){
				border-bottom: 3px solid @color;
			}
			&:nth-child(3){
				font-weight: bold;
			}
		}
		
	}
	.main-font{
			margin-top: 1.875rem;
			p{
				font-size: 0.875rem;
				color: #6c6c6c;
				line-height: 13px;
			}
		}
		.main-list{
			margin-top: 1.875rem;
			ul li{
				font-size: 0.875rem;
				color: #5a5a5a;
				background: url(../img/icon.png)no-repeat left 7px;
				line-height: 28px;
				padding-left: 22px;
			}
		}
	.main-btn{
		width: 194px;
		height:47px;
		border: 1px solid #7f7f7f;
		margin-top: 38px;
		border-radius: 3px;
		line-height: 47px;
		transition: all 0.6s; 
		&:hover{
			box-shadow: 1px 1px 28px black;
			transform: scale(1.2);
		}
		span{
			&:nth-child(1){
				padding-left: 1.875rem;
			}
		}
	}
}

@media (max-width:992px) {
	.main-left{
		display: none;
	}
	.main-right{
		margin-left: 3.75rem;
	}
	// .main{
	// 	height: 100%;
	// }
	
}
@media (min-width:992px) {
	.main-right{
		margin-left: 120px;
	}
}

.menu{
	height: 48rem;
	background-color: @bg;
	.menu-title{
		padding-top: @margin;
		p{
			font-size: 1.9375rem;
			color: @font;
			text-transform: uppercase;
			text-align: center;
		}
	}
	.menu-img img{
		width: 8.125rem;
		height: 8.125rem;
		border-radius: 100%;
		transition: all .6s; 
		&:hover{
			box-shadow: 1px 1px 28px #FFFFFF;
			transform: translateY(-15px);
		}
	}
	.menu-box{
		margin-top: 90px;
	}
	.menu-font{
		p{
			&:nth-child(1){
				font-size: 0.875rem;
				text-align: center;
				color: #FFFFFF;
				padding-top: 1.25rem;
			}
			&:nth-child(2){
				font-size: 0.75rem;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
	.menu-list{
		ul li{
			color: #FFFFFF;
			text-align: center;
		}
	}
	.swiper-pagination-bullet{
		width: 9px;
		height: 9px;
		border-radius: 0;
		background-color: #FFFFFF;
	}
	.swiper-pagination-bullet-active{
		background-color: @color;
	}
}
@media (min-width:992px) {
	.swiper{
		height: 32.375rem;
	}
}

@media (max-width:992px) {
	.menu{
		height: 100%;
	}
}


.submenu{
	height: 46rem;
	.submenu-title p{
		text-align: center;
		font-size: 1.9375rem;
		text-transform: uppercase;
		padding-top: @margin;
	}
	.submenu-box{
		margin-top: 130px;
		img{
			transition: all .6s;
			&:hover{
				transform: rotate(360deg);
			}
		}
	}
	.submenu-font{
		padding-top: 40px;
		p{
			text-align: center;
			// line-height: 13px;
			color: #6c6c6c;
			font-size: 0.6875rem;
		}
	}
	.submenu-center{
		p{
			font-size: 1.125rem;
			color: #222222;
			text-align: center;
			text-transform: uppercase;
			padding-top: 1.75rem;
		}
	}
	.submenu-bottom{
		p{
			text-align: center;
			font-size: 14px;
			color: #727272;
			line-height: 10px;
		}
	}
}
@media (max-width:992px) {
	.submenu{
		height: 100%;
	}
	.submenu .submenu-box{
		margin-top: 50px;
	}
	.submenu .submenu-bottom p{
		line-height: 16px;
	}
}

.wrapper{
	height: 517px;
	background-color: #0b0b0b;
	.wrapper-title{
		p{
			font-size: 1.9375rem;
			color: @font;
			text-align: center;
			padding-top: @margin;
		}
	}
	.wrapper-img{
		img{
			padding-top: @margin;
		}
	}
	.paging{
		display: flex;
		justify-content: center;
		margin-top: @margin;
		ul li{
			width: 9px;
			height: 9px;
			background-color: #FFFFFF;
			margin-left: 13px;
			float: left;
			&:nth-child(1){
				background-color: @color;
			}
			&:hover{
				background-color: @color;
			}
		}
	}
}

@media (max-width:992px) {
	.wrapper-img img{
		width: 100%;
	}
}

.container-box{
	height: 1392px;
	.container-title{
		p{
			font-size: 1.9375rem;
			color: #222222;
			text-align: center;
			text-transform: uppercase;
			padding-top: @margin;
		}
	}
	.container-font{
		text-align: center;
		font-size: 0.75rem;
		color: #c3c3c3;
		padding-top: 2.6875rem;
		p{
			line-height: 12px;
		}
	}
	
	.container-nav{
		display: flex;
		justify-content: space-between;
		padding-top: 100px;
		.container-left{
			color: #222222;
			font-size: 0.8125rem;
			text-transform: uppercase;
			font-weight: bold;
		}
		.container-right ul li{
			float: left;
			color: #6c6c6c;
			font-size: 13px;
			border-left: 1px solid #999;
			height: 18px;
			width: 101px;
			padding-left: 11px;
			&:nth-child(1){
				padding-left: 63px;
				border: none;
				font-weight: bold;
			}
		}
	}
	.inner{
		margin-top: 2.8125rem;
		.inner-box{
			position: relative;
			margin-top: 30px;
			display: flex;
			justify-content: center;
		}
		.inner-center{
			width: 265px;
			height: 239px;
			margin: 0 auto;
			background-color: #222222;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transition: all .6s;
			&:hover{
				opacity: 1;
				transform: rotate(360deg);
			}
		}
		
		.inner-center p{
				&:nth-child(1){
					font-size: 18px;
					text-align: center;
					color: #FFFFFF;
					text-transform: uppercase;
					padding-top: 65px;
				}
				&:nth-child(2){
					font-size: 15px;
					color: #b2b2b2;
					text-align: center;
				}
		}
		.inner-btn{
			position: absolute;
			width: 40px;
			height: 40px;
			border: 3px solid #d6943f;
			border-radius: 100%;
			color: #d6943f;
			text-align: center;
			font-size: 26px;
			left: 113px;
			top: 158px;
			
		}
	}
}

@media (max-width:768px) {
	.container-box .container-nav{
		display: inline-block;
		text-align: center;
	}
	// .inner-box{
	// 	left: 30px;
	// }
	
}

@media (max-width:1024px) {
	.container-box{
		height: 100%;
	}
	.container-box .inner .inner-center{
		left: 95px;
	}
	
}


.aside{
	height: 562px;
	background-color: #0b0b0b;
	.aside-title{
		font-size: 31px;
		color: #FFFFFF;
		text-transform: uppercase;
		text-align: center;
		padding-top: @margin;
	}
	.aside-font{
		font-size: 13px;
		color: #FFFFFF;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		padding-top: @margin;
	}
	.tag{
		font-size: 13px;
		color: #b2b2b2;
		text-align: center;
		padding-top: 50px;
	}
	.paging1{
		display: flex;
		justify-content: center;
		margin-top: @margin;
		ul li{
			width: 9px;
			height: 9px;
			background-color: #FFFFFF;
			margin-left: 13px;
			float: left;
			&:nth-child(1){
				background-color: @color;
			}
			&:hover{
				background-color: @color;
			}
		}
	}
}

.search{
	height: 833px;
	.search-title{
		font-size: 31px;
		text-align: center;
		text-transform: uppercase;
		padding-top: @margin;
	}
	.search-font{
		text-align: center;
		color: #6c6c6c;
		padding-top: 2.6875rem;
		p{
			line-height: 13px;
		}
	}
	.search-box{
		margin-top: @margin;
	}
	.input{
		width: 26vw;
		height: 42px;
	}
	.text{
		text-align: center;
	}
	.text-font{
		padding-left: 13px;
	}
	.text-box{
		margin-top: 10px;
		.span{
			padding-left: 45px;
		}
	}
	.search-btn{
		width: 165px;
		height: 40px;
		background-color: @color;
		color: #FFFFFF;
		text-align: center;
		font-size: 12px;
		line-height: 40px;
		float: right;
		margin-right: 42px;
		margin-top: 15px;
	}
}
@media (min-width:992px) {
	.search-box{
		display: flex;
		justify-content: space-around;
	}
}

@media (max-width:992px) {
	.input{
		width: 95% !important;
		margin-left: 10px;
	}
	textarea{
		width: 96%;
	}
	
	.span{
		padding-left: 13px !important;
	}
	.footer{
		height: 100% !important;
	}
	
}

.footer{
	height: 90px;
	background-color: #222222;
	.footer-left{
		color: #969696;
		line-height: 90px;
	}
	.footer-right {
		span{
			margin-left: 12px;
			line-height: 90px;
		}
		
	}
	
}
@media (min-width:992px) {
	.footer-right {
		float: right;
		span{
			margin-left: 12px;
			line-height: 90px;
		}
		
	}
}



// gn: center;
// 	}
// }
// ter;
// 	}
// }
// / 	}
// }
// ter;
// 	}
// }
// }
// 	}
// }
// / 	}
// }
// }
// }
// }
// }
// }
// 	}
// }
// }
// }
// }
// }
 	// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
 	// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// / }
// }
// }
